<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            height: 280px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .imgContainer {
            position: absolute;
            width: 2600px;
            height: 280px;
            left: 0px;
        }

        .imgContainer img {
            float: left;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="imgContainer">
            <img src="./imgs/1t.png">
            <img src="./imgs/2t.png">
            <img src="./imgs/3t.png">
            <img src="./imgs/4t.png">
            <img src="./imgs/5t.png">
        </div>
    </div>
    <script>


        // 1。上一页（复制最后一张到第一张前面） 和下一页 （无限轮播）
        // 鼠标移入 imgContainerEle 停止自动轮播
        // 2.点 
        // 复习；

        var imgContainerEle = document.querySelector(".imgContainer");

        var page = 1;// 代表当前的图片

        // 自动播放 
        function autoPlay() {
            setInterval(function () {
                move(imgContainerEle, -520 * page, "left", function () {
                    console.log("运动完成");
                    page++;
                    if (page == 6) {
                        page = 1;
                        imgContainerEle.style.left = "0px";
                    }
                })
            }, 2000);
        }
        cloneElement();
        autoPlay();
        // 克隆元素；
        // deepCopy
        function cloneElement(){
            var firstEle =  imgContainerEle.firstElementChild.cloneNode(true);
            imgContainerEle.style.width = "3120px";
            imgContainerEle.appendChild(firstEle);
        }




        function move(ele, target, dir, cb) {
            function fn() {
                var num = parseInt(getComputedStyle(ele)[dir]);
                var speed = target < num ? -10 : 10;
                if (num == target) {
                    console.log("停止了");
                    cb && cb();
                } else {
                    num += speed;
                    ele.style[dir] = num + "px";
                    requestAnimationFrame(fn);
                }
            }
            fn();
        }
    </script>
</body>

</html>